<template>
  <div class="list-table">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item v-if="!$route.query.dealType" :label="$t('项目类型')" prop="dealType1">
        <dict-select
          v-model="queryParams.dealType"
          dictionary="deal_type"
          :clearable="false"
          @change="dealTypeChange"
        />
      </el-form-item>
      <el-form-item :label="$t('投资主体')" prop="investId">
        <!--              <el-select v-model="queryParams.investId" :placeholder="$t('投资主体')" clearable>-->
        <!--                <el-option />-->
        <!--              </el-select>-->
        <!--        <el-input v-model="queryParams.investId" :placeholder="$t('投资主体')" />-->
        <investment-select v-model="queryParams.investId" :placeholder="$t('投资主体')" />
      </el-form-item>
      <el-form-item :label="$t('项目名称')" prop="dealName">
        <deal-select v-model="queryParams.dealName" :placeholder="$t('项目名称')" />
      </el-form-item>
      <el-form-item :label="$t('公司名称')" prop="companyName">
        <company-select v-model="queryParams.companyName" :placeholder="$t('公司名称')" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>
    <div v-loading="dictLoading" class="flex">
      <div class="left">
        <el-select v-model="queryParams.searchType" :placeholder="$t('选择类型')" size="small" :clearable="false" @change="changeSearchType">
          <el-option v-for="searchTypeDict in searchTypeOptions" :key="searchTypeDict.dictValue" :value="searchTypeDict.dictValue" :label="searchTypeDict.dictLabel" />
        </el-select>
        <div class="sideBar-content" :style="'height:' + leftHeight + 'px'">
          <ul class="industry industryUl">
            <li v-for="v in portfolioInfo.leftSide" :key="v.value" :class="industry === v.value ? 'link-type' : ''" @click="clickSideItem(v.value)">
              <span :title="v.label">{{ v.label }}</span>
              <span>{{ v.count }}</span>
            </li>
          </ul>
        </div>
        <el-divider />
        <div class="tit">分析</div>
        <div class="tags">
          <span v-for="v in searchTypeOptions" :key="v.dictValue" class="link-type" @click="onClick(v)">{{ v.dictLabel }}</span>
        </div>
      </div>
      <div class="right" :span="20">
        <div v-loading="dataLoading" class="top">
          <div class="flex-header">
            <span class="title">{{ $t(`${selectDictLabelByCustomKey(portfolioInfo.leftSide,industry,'value','label')}数据变化`) }}</span>
            <el-select v-model="queryParams.dimensionType" :placeholder="$t('请选择')" size="mini" clearable @change="changeDimensionType">
              <el-option v-for="dict in portfolioInfo.dimensionTypeDicts" :key="dict.dictValue" :value="dict.dictValue" :label="dict.dictLabel" />
            </el-select>
          </div>
          <ul>
            <li>
              <p class="tit"><span style="background: rgba(57, 175, 209, 1);"><i class="iconfont icon-touzishuliang" /></span>{{ $t('累计投资(个)') }}/{{ $t('投后项目(个)') }}</p>
              <div class="libottom">
                <p class="number"><i>{{ portfolioInfo.currentData && portfolioInfo.currentData.totalInvestmentAmount ? moneyFormat(portfolioInfo.currentData.totalInvestmentAmount) : '0' }}</i>/<i>{{ portfolioInfo.currentData && portfolioInfo.currentData.dealTotalCount ? portfolioInfo.currentData.dealTotalCount : '0' }}</i></p>
                <p class="bottom up">{{ $t('本期新增') }}<em>{{ portfolioInfo.prevData && portfolioInfo.prevData.totalInvestmentAmount ? moneyFormat(portfolioInfo.prevData.totalInvestmentAmount) : '0' }}</em>/<em>{{ portfolioInfo.prevData && portfolioInfo.prevData.dealTotalCount ? portfolioInfo.prevData.dealTotalCount : '0' }}</em></p>
              </div>
            </li>
            <li>
              <p class="tit"><span style="background: rgba(114, 124, 245, 1);"><i class="iconfont icon-touzichengben" /></span>投资成本{{ $t('金额单位') }}</p>
              <div class="libottom">
                <p class="number"><i>{{ portfolioInfo.currentData && portfolioInfo.currentData.investCost ? moneyFormat(portfolioInfo.currentData.investCost,'w',2,true) : '0.00' }}</i></p>
                <p class="bottom up">{{ $t('本期新增') }}<em>{{ portfolioInfo.prevData && portfolioInfo.prevData.investCost ? moneyFormat(portfolioInfo.prevData.investCost,'w',2,true) : '0.00' }}</em></p>
              </div>
            </li>
            <li>
              <p class="tit"><span style="background: rgba(253, 196, 36, 1);"><i class="iconfont icon-huikuanjine" /></span>回款金额{{ $t('金额单位') }}</p>
              <div class="libottom">
                <p class="number"><i>{{ portfolioInfo.currentData && portfolioInfo.currentData.collectionAmount ? moneyFormat(portfolioInfo.currentData.collectionAmount,'w',2,true) : '0.00' }}</i></p>
                <p class="bottom up">{{ $t('本期新增') }}<em>{{ portfolioInfo.prevData && portfolioInfo.prevData.collectionAmount ? moneyFormat(portfolioInfo.prevData.collectionAmount,'w',2,true) : '0.00' }}</em></p>
              </div>
            </li>
            <li>
              <p class="tit"><span style="background: rgba(44, 212, 164, 1);"><i class="iconfont icon-guzhi" /></span>估值{{ $t('金额单位') }}</p>
              <div class="libottom">
                <p class="number"><i>{{ portfolioInfo.currentData && portfolioInfo.currentData.valuationAmount ? moneyFormat(portfolioInfo.currentData.valuationAmount,'w',2,true) : '0.00' }}</i></p>
                <p class="bottom up">{{ $t(`上期(${portfolioInfo.prevData ? portfolioInfo.prevData.time : ''})`) }}<em>{{ portfolioInfo.prevData && portfolioInfo.prevData.valuationAmount ? moneyFormat(portfolioInfo.prevData.valuationAmount,'w',2,true) : '0.00' }}</em></p>
                <!--                <p class="bottom" :class="portfolioInfo.prevData && portfolioInfo.prevData.valuationAmount && portfolioInfo.prevData.valuationAmount < 0 ? 'down' : 'up'">{{ // $t(`较上期(${portfolioInfo.prevData ? portfolioInfo.prevData.time : ''})`) }}<i v-if="portfolioInfo.prevData && portfolioInfo.prevData.valuationAmount !== 0" :class="portfolioInfo.prevData && portfolioInfo.prevData.valuationAmount && portfolioInfo.prevData.valuationAmount < 0 ? 'icon-a-down' : 'icon-a-up'" class="iconfont" /><em>{{ portfolioInfo.prevData && portfolioInfo.prevData.valuationAmount ? moneyFormat(portfolioInfo.prevData.valuationAmount,'w',2,true) : '0' }}</em></p>-->
              </div>
            </li>
            <li>
              <p class="tit"><span><i class="iconfont icon-MOIC" /></span>MOIC</p>
              <div class="libottom">
                <p class="number"><i>{{ portfolioInfo.currentData && portfolioInfo.currentData.moic ? moneyFormat(portfolioInfo.currentData.moic) : '0.00' }}</i></p>
                <p class="bottom up">{{ $t(`上期(${portfolioInfo.prevData ? portfolioInfo.prevData.time : ''})`) }}<em>{{ portfolioInfo.prevData && portfolioInfo.prevData.moic ? moneyFormat(portfolioInfo.prevData.moic) : '0.00' }}</em></p>
                <!--                <p class="bottom" :class="portfolioInfo.prevData && portfolioInfo.prevData.moic && portfolioInfo.prevData.moic < 0 ? 'down' : 'up'">{{ $t(`较上期(${portfolioInfo.prevData ? portfolioInfo.prevData.time : ''})`) }}<i v-if="portfolioInfo.prevData && portfolioInfo.prevData.moic !== 0" class="iconfont" :class="portfolioInfo.prevData && portfolioInfo.prevData.moic && portfolioInfo.prevData.moic < 0 ? 'icon-a-down' : 'icon-a-up'" /><em>{{ portfolioInfo.prevData && portfolioInfo.prevData.moic ? moneyFormat(portfolioInfo.prevData.moic) : '0' }}</em></p>-->
              </div>
            </li>
            <li>
              <p class="tit"><span><i class="iconfont icon-MOIC" /></span>IRR <i class="el-icon-question" :title="$t(`参与IRR计算的预计现金流时间按${calcDate}计算`)" /></p>
              <div class="libottom">
                <p class="number"><i>{{ portfolioInfo.currentData && portfolioInfo.currentData.irr ? moneyFormat(portfolioInfo.currentData.irr) : '0.00' }}</i>%</p>
                <p class="bottom up">{{ $t(`上期(${portfolioInfo.prevData ? portfolioInfo.prevData.time : ''})`) }}<em>{{ portfolioInfo.prevData && portfolioInfo.prevData.irr ? moneyFormat(portfolioInfo.prevData.irr) : '0.00' }}</em>%</p>
                <!--                <p class="bottom" :class="portfolioInfo.prevData && portfolioInfo.prevData.irr && portfolioInfo.prevData.irr < 0 ? 'down' : 'up'">{{ $t(`较上期(${portfolioInfo.prevData ? portfolioInfo.prevData.time : ''})`) }}<i v-if="portfolioInfo.prevData && portfolioInfo.prevData.irr !== 0" class="iconfont" :class="portfolioInfo.prevData && portfolioInfo.prevData.irr && portfolioInfo.prevData.irr < 0 ? 'icon-a-down' : 'icon-a-up'" /><em>{{ portfolioInfo.prevData && portfolioInfo.prevData.irr ? moneyFormat(portfolioInfo.prevData.irr) : '0' }}</em>%</p>-->
              </div>
            </li>
          </ul>
        </div>
        <el-table v-loading="tableLoading" max-height="400" tooltip-effect="darkTable" :data="dealBaseList" border stripe :row-style="rowStyle" @sort-change="dataSort">
          <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
            <template slot-scope="scope">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column sortable="custom" :label="$t('项目名称')" align="center" prop="dealName" min-width="140" show-overflow-tooltip>
            <template slot-scope="scope">
              <router-link
                v-if="scope.row.dealName !== '合计'"
                :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.id, companyId: scope.row.companyId}}"
                target="_blank"
                class="link_a"
              >
                <span>{{ scope.row.dealName }}</span>
              </router-link>
              <span v-else>{{ scope.row.dealName }}</span>
            </template>
          </el-table-column>
          <el-table-column sortable="custom" :label="$t('投资主体')" align="center" show-overflow-tooltip prop="investName" min-width="120" />
          <el-table-column sortable="custom" :label="$t('投资时间')" align="center" show-overflow-tooltip prop="investTime" min-width="120" />
          <el-table-column sortable="custom" :label="$t('投资成本') + $t('金额单位')" show-overflow-tooltip align="center" prop="investCost" min-width="130">
            <template slot-scope="scope">
              <span class="money-text">{{ moneyFormat(scope.row.investCost,'w',2,true) }}</span>
            </template>
          </el-table-column>
          <el-table-column sortable="custom" :label="$t('累计回款')+$t('金额单位')" show-overflow-tooltip align="center" prop="collectionAmount" min-width="130">
            <template slot-scope="scope">
              <span class="money-text">{{ moneyFormat(scope.row.collectionAmount,'w',2,true) }}</span>
            </template>
          </el-table-column>
          <el-table-column sortable="custom" :label="$t('估值')+$t('金额单位')" show-overflow-tooltip align="center" prop="valuationAmount" min-width="130">
            <template slot-scope="scope">
              <span class="money-text">{{ moneyFormat(scope.row.valuationAmount,'w',2,true) }}</span>
            </template>
          </el-table-column>
          <el-table-column sortable="custom" :label="$t('估值时间')" show-overflow-tooltip align="center" prop="valuationTime" min-width="120" />
          <el-table-column sortable="custom" :label="$t('MOIC')" align="center" show-overflow-tooltip prop="moic" min-width="100" :formatter="calcMoic" />
          <el-table-column sortable="custom" :label="$t('IRR(%)')" align="center" prop="irr" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.irr || scope.row.irr === 0 ? scope.row.irr.toFixed(2) : scope.row.irr }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getDealList"
        />
      </div>
    </div>

    <el-dialog :title="$t(title)" width="70%" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" destroy-on-close custom-class="dialogView">
      <div style="height: auto;">
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="box-shadow-list pad15 mr10">
              <div class="area-header">
                <span class="area-header-sign" />
                <span class="area-header-title">{{ $t('项目数量') }}</span>
              </div>
              <div style="height:400px;position: relative;">
                <pieChart v-if="chartData1.datas.length > 0" :chart-data="chartData1" height="100%" @xData="handleTooltipClick($event, '1')" />
                <div v-else class="noneData">
                  <div>
                    <svg-icon icon-class="none" class-name="none-icon" />
                    <p>{{ $t('暂无数据') }}</p>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="box-shadow-list pad15 mr10">
              <div class="area-header">
                <span class="area-header-sign" />
                <span class="area-header-title">{{ $t('投资成本') }}</span>
              </div>
              <div style="height:400px;position: relative;">
                <pieChart v-if="chartData2.datas.length > 0" :chart-data="chartData2" height="100%" @xData="handleTooltipClick($event, '2')" />
                <div v-else class="noneData">
                  <div>
                    <svg-icon icon-class="none" class-name="none-icon" />
                    <p>{{ $t('暂无数据') }}</p>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="box-shadow-list pad15">
              <div class="area-header">
                <span class="area-header-sign" />
                <span class="area-header-title">{{ $t('账面收益(回款+估值)') }}</span>
              </div>
              <div style="height:400px;position: relative;">
                <pieChart v-if="chartData3.datas.length > 0" :chart-data="chartData3" height="100%" @xData="handleTooltipClick($event, '3')" />
                <div v-else class="noneData">
                  <div>
                    <svg-icon icon-class="none" class-name="none-icon" />
                    <p>{{ $t('暂无数据') }}</p>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="mt20">
          <!-- <div class="small-group"> -->
          <!--            <span :class="radioVal === '全部' ? 'link-type' : ''">全部</span>-->
          <!--            <span v-for="item in portfolioInfo.dimensionTypeDicts" :key="item.dictValue" class="">{{ item.dictLabel }}</span>-->
          <!-- </div> -->
          <el-table tooltip-effect="darkTable" :data="chartList " border stripe>
            <el-table-column :label="$t(title)" align="center" prop="category" min-width="120" show-overflow-tooltip />
            <el-table-column :label="$t('项目数量')" align="center" prop="count" min-width="160" show-overflow-tooltip />
            <el-table-column :label="$t('投资成本') + $t('金额单位')" align="investCost" prop="investAmount" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="money-text">{{ moneyFormat(scope.row.investCost,'w',2,true) }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('累计回款')+$t('金额单位')" align="center" prop="collectionAmount" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="money-text">{{ moneyFormat(scope.row.collectionAmount,'w',2,true) }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('估值')+$t('金额单位')" align="center" prop="valuationAmount" min-width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="money-text">{{ moneyFormat(scope.row.valuationAmount,'w',2,true) }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('MOIC')" align="center" prop="moic" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="money-text">{{ moneyFormat(scope.row.moic,'',2,true) }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('IRR')" align="center" prop="irr" min-width="100" show-overflow-tooltip>
              <template slot="header" slot-scope="{}">
                <span>{{ $t('IRR(%)') }}</span>
                <i class="el-icon-question" :title="$t(`参与IRR计算的预计现金流按${parseTime(new Date(),'{y}-{m}-{d}')}计算`)" />
              </template>
              <template slot-scope="scope">
                <span class="money-text">{{ moneyFormat(scope.row.irr,'',2,true) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pieChart from '@/views/chart/pieChart'
// import { Decimal } from 'decimal.js'
import {
  findDealList, getChart, getChartList,
  investmentPortfolioInfo,
  investmentPortfolioLeftSideDicts
} from '@/api/deal/investmentPortfoilo/investmentPortFoilo'
import { moneyFormat, selectDictLabelByCustomKey } from '../../../utils/ruoyi'
export default {
  components: {
    pieChart
  },
  data() {
    return {
      formOpen: false,
      loading: false,
      tableLoading: true,
      dataLoading: true,
      dictLoading: true,
      radioVal: '全部',
      total: 0,
      title: '',
      queryTime: '',
      queryIndustry: '',
      queryParams: {
        dealType: undefined,
        searchType: 'industry',
        searchValue: undefined,
        dimensionType: new Date().getFullYear(),
        pageNum: 1,
        pageSize: 10,
        order: undefined,
        dealName: undefined,
        investId: undefined,
        companyName: undefined
      },
      queryBaseParams: {
        searchType: 'industry',
        pageNum: 1,
        pageSize: 10
      },
      dealBaseList: [],
      analysisDetail: [],
      queryDealBase: {},
      industry: '新能源',
      industryList: [],
      chartList: [],
      chartData1: {
        legend: true,
        top: '70%',
        orient: 'vertical',
        legendFormatter: true,
        datas: []
      },
      chartData2: {
        legend: true,
        valueFormatter: true,
        legendFormatter: true,
        top: '70%',
        orient: 'vertical',
        datas: []
      },
      chartData3: {
        legend: true,
        valueFormatter: true,
        legendFormatter: true,
        top: '70%',
        orient: 'vertical',
        datas: []
      },
      // 项目类型字典
      dealTypeOptions: [],
      // 查询类型字典
      searchTypeOptions: [],
      // 投资组合信息
      portfolioInfo: {}
    }
  },
  computed: {
    calcDate() {
      var dimensionType = this.queryParams.dimensionType + ''
      if (dimensionType) {
        if (dimensionType.indexOf('Q') === -1) {
          var date = new Date()
          var fullYear = date.getFullYear()
          if (fullYear + '' === dimensionType) {
            return this.parseTime(new Date(), '{y}-{m}-{d}')
          } else {
            return dimensionType + '-12-31'
          }
        } else {
          var year = dimensionType.split('Q')[0]
          var quarter = dimensionType.split('Q')[1]

          switch (quarter) {
            case '1':
              return year + '-03-31'
            case '2':
              return year + '-06-30'
            case '3':
              return year + '-09-30'
            case '4':
              return year + '-12-31'
          }
        }
      }
      return ''
    },
    leftHeight() {
      // 可视窗口高度
      var height = window.innerHeight
      console.log(height)
      return height - 350
    }
  },
  created() {
    this.getDicts('deal_type').then(res => {
      this.dealTypeOptions = res.data
      this.queryParams.dealType = this.$route.query.dealType || res.data[0].dictValue
      this.getLeftDicts()
    })
  },
  methods: {
    moneyFormat,
    selectDictLabelByCustomKey,
    init() {
      this.dataLoading = true
      investmentPortfolioInfo(this.queryParams).then(res => {
        this.portfolioInfo = res.data
        this.dataLoading = false
        this.dictLoading = false
      })
      this.getDealList()
    },
    getLeftDicts() {
      this.dictLoading = true
      investmentPortfolioLeftSideDicts(this.queryParams).then(typeDicts => {
        this.searchTypeOptions = typeDicts.data
        this.queryParams.searchType = typeDicts.data[0].dictValue
        this.dictLoading = false
        this.init()
      })
    },
    clickSideItem(sideName) {
      if (sideName === this.industry) {
        this.industry = undefined
        this.queryParams.searchValue = undefined
      } else {
        this.industry = sideName
        this.queryParams.searchValue = sideName
      }
      this.init()
    },
    changeDimensionType() {
      this.init()
    },
    changeSearchType() {
      this.dictLoading = true
      this.queryParams.searchValue = undefined
      this.industry = undefined
      this.init()
    },
    getDealList() {
      this.tableLoading = true
      findDealList(this.queryParams).then(res => {
        this.total = res.total
        this.dealBaseList = res.rows
        this.tableLoading = false
      })
    },
    onClick(item) {
      this.title = item.dictLabel
      this.formOpen = true
      getChartList(item.dictValue, this.queryParams.dealType).then(res => {
        console.log(res, '列表数据')
        this.chartList = res.data
      })
      getChart(item.dictValue, this.queryParams.dealType).then(res => {
        console.log(res, '图表数据')
        this.chartData1.datas = res.data.countChart
        this.chartData1.tooltip = [
          { name: this.$t(this.title), field: 'name' },
          { name: this.$t('数量(个)'), field: 'value' }
        ]
        this.chartData1.formatterLegend = [
        ]
        this.chartData2.datas = res.data.investCostChart
        this.chartData2.tooltip = [
          { name: this.$t(this.title), field: 'name' },
          { name: this.$t('投资成本'), field: 'value', valueFormatter: true }
        ]
        this.chartData3.datas = res.data.incomeChart
        this.chartData3.tooltip = [
          { name: this.$t(this.title), field: 'name' },
          { name: this.$t('账面收益'), field: 'value', valueFormatter: true }
        ]
      })
    },
    dataSort(e) {
      console.log(e)
      this.queryParams.order = e.order
      this.queryParams.orderColumn = e.prop
      this.init()
    },
    rowStyle({ row }) {
      if (row.dealName === '合计') {
        var style = {
          'font-weight': 'bolder'
        }
        return style
      } else {
        return {}
      }
    },
    calcMoic(row) {
      // if ((row.investCost || row.investAmount === 0) && (row.collectionAmount || row.collectionAmount === 0) && (row.investAmount)) {
      //   var valution = new Decimal(row.valuationAmount)
      //   valution = new Decimal(valution.add(row.collectionAmount))
      //   var num = valution.div(row.investAmount)
      //   return num.toFixed(2)
      // }
      // return ''
      return row.moic
    },
    queryHandle() {
      this.queryParams.pageNum = 1
      this.init()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    dealTypeChange() {
      this.queryParams.searchValue = undefined
      this.getLeftDicts()
    }
  }
}
</script>

<style scoped lang="scss">
.sideBar-content {
  margin-right: -10px;
  height: calc(100% - 70px);
  .industryUl, .industry_tree{
    height: 100%;
    overflow: auto;
  }
  /deep/.industry_tree{
    padding-right: 10px;
    .el-tree {
      .el-tree-node__content {
        height: 30px;
      }
      .industry_tree_node{
        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 5px;
        width: 100%;
        font-size: 13px;
        overflow: hidden;
        span{
          &:first-child{
            white-space: nowrap;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
.flex{
  display: flex;
  min-height: 50vh;
  column-gap: 20px;
  .left{
    box-shadow: 0px 0px 4px 0px #001AA31A;
    padding: 15px;
    border-radius: 5px;
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    ul{
      //min-height: 45%;
      margin-top: 10px;
    }
    .el-divider{
      margin: 15px 0;
    }
    .tags{
      display: grid;
      grid-template-columns: repeat(2, 71px);
      grid-column-gap: 10px;
      grid-row-gap: 10px;
      font-size: 13px;
      margin-top: 15px;
      span{
        cursor: pointer;
      }
    }
  }
  .industryUl {
    li{
      display: flex;
      justify-content: space-between;
      column-gap: 5px;
      cursor: pointer;
      font-size: 13px;
      padding: 6px 10px;
      margin: 7px 0;
      border-radius: 0 5px 5px 0;
      border-left: 1px solid transparent;
      span{
        &:first-child{
          white-space: nowrap;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .link-type{
      background: rgba(67, 78, 184, 0.1);
      border-left: 1px solid rgba(67, 78, 184, 1);
    }
    .tags{
      display: grid;
      grid-template-columns: repeat(2, 60px);
      grid-column-gap: 10px;
      grid-row-gap: 10px;
      font-size: 13px;
      span{
        cursor: pointer;
      }
    }
  }
  .right{
    flex: 1;
    width: calc(100% - 190px);
    .top{
      // border: 1px solid rgba(236, 239, 250, 1);
      background: rgba(247, 250, 255, 1);
      border-radius: 6px;
      padding: 10px 15px 15px;
      margin-bottom: 20px;
      p{
        margin: 0;
      }
      .flex-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .tit{
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
        }
      }
      ul{
        // display: flex;
        // margin-top: 20px;
        li{
          // flex: 1;
          margin-top: 16px;
          width: calc(100% / 3 - 11px);
          display: inline-block;
          position: relative;
          border: 1px solid #E7EBEE;
          border-radius: 6px;
          padding: 15px 15px 10px;
          margin-right: 10px;
          &:nth-child(3n) {
            margin-right: 0px!important;
          }
          // &:nth-child(3n-1) {
          //   &::before{
          //     content: '';
          //     position: absolute;
          //     width: 1px;
          //     height: 80%;
          //     background: #DEE1E5;
          //     left: 0;
          //     top: 10%;
          //   }
          //   &::after{
          //     content: '';
          //     position: absolute;
          //     width: 1px;
          //     height: 80%;
          //     background: #DEE1E5;
          //     right: 0;
          //     top: 10%;
          //   }
          // }
          .tit{
            display: flex;
            align-items: center;
            column-gap: 4px;
            font-size: 13px;
            line-height: 16px;
            white-space: nowrap;
            color: rgba(78, 89, 105, 1);
            span{
              background: rgba(49, 108, 236, 1);
              border-radius: 50%;
              width: 18px;
              height: 18px;
              display: flex;
              align-items: center;
              justify-content: center;
              i{
                color: #fff;
                font-size: 10px;
                height: 10px;
                line-height: normal;
              }
            }
          }
          .libottom{
            // display: flex;
            // align-items: baseline;
          }
          .number{
            font-size: 17px;
            color: rgba(78, 89, 105, 1);
            margin: 10px 0;
            white-space: nowrap;
            display: flex;
            align-items: center;
            column-gap: 5px;
            margin: 8px 0px;
            i{
              font-size: 24px;
              color: rgba(51, 51, 51, 1);
              font-style: normal;
              font-weight: bold;
              font-family: San Francisco Display;
            }
          }
          .bottom{
            color: rgba(102, 102, 102, 1);
            font-size: 13px;
            display: block;
            white-space: nowrap;
            display: flex;
            align-items: center;
            column-gap: 3px;
            line-height: 18px;
            em{
              font-style: normal;
              margin: 0 3px;
              font-weight: bold;
              font-family: San Francisco Display;
            }
            i{
              font-size: 12px;
            }
          }
          .up {
            color: rgba(219, 90, 82, 1);
            em{
              font-weight: bold;
            }
            i {
              margin-left: 5px;
            }
          }
          .down {
            color:rgba(62, 187, 119, 1);
            em{
              font-weight: bold;
            }
            i {
              margin-left: 5px;
            }
          }
        }
      }
    }
  }
}
.industry {
  li{
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    font-size: 13px;
    padding: 6px 10px;
    margin: 7px 0;
    border-radius: 0 5px 5px 0;
    border-left: 1px solid #fff;
  }
  .link-type{
    background: rgba(67, 78, 184, 0.1);
    border-left: 1px solid rgba(67, 78, 184, 1);
  }
  .tags{
    display: grid;
    grid-template-columns: repeat(2, 60px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    font-size: 13px;
    span{
      cursor: pointer;
    }
  }
}

.small-group{
  padding: 30px 0px;
  span{
    background: rgba(243, 246, 251, 1);
    color: rgba(102, 102, 102, 1);
    border-radius: 20px;
    font-size: 14px;
    padding: 7px 15px;
    cursor: pointer;
    margin-right: 5px;
  }
  .link-type{
    background: rgba(0, 26, 163, 0.1);
  }
}
.el-icon-question{
  cursor: pointer;
  color: #959292;
  line-height: 20px;
}
</style>
